<template>
	<view>
		<map style="width: 100%; height: 80vh;" :latitude="coords.latitude" :longitude="coords.longitude"
			:markers="markers"></map>
	</view>
	<view class="g-bottom">
		<view class="g-title">伟业汽车加油站(人民路店)</view>
		<view class="g-adress">山阳区人民中路32号</view>
		<image @tap="ComeToDe" class="g-img" style="width: 15vw;" mode="aspectFit"  :src="ZhiNanZhendataUri"></image>
	</view>
</template>

<style>
	.g-title{
		font-weight: 600;
		margin-left: 20px;
		margin-top: 20px;
	}
	
	.g-adress{
		font-weight: 400;
		margin-left: 20px;
		margin-top: 5px;
	}
	.g-bottom{
		position: relative;
	}
	.g-img {
		position: absolute;
		right: 40px;
		top: -80px;
	}
	       
</style>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	
	var QQMapWX = require('../../static/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	const coords = ref(null)
	let star = ref(3)
	const markers = ref([{
			id: 1,
			latitude: 34.74821 + 0.0015, // 主干道交汇处
			longitude: 113.61332 - 0.002,
			// iconPath: '/static/garage.png',  // 保养工位图标
			title: "云洗快修连锁(中州大道店)",
			width: 40,
			height: 40,
			callout: {
				content: "24小时服务 | 当前空闲工位：3\n特色：全合成机油买三送一\n电话：400-886-1234",
				color: '#1890ff',
				borderRadius: 8,
				padding: 12
			}
		},
		{
			id: 2,
			latitude: 34.74821 - 0.0008, // 加油站旁
			longitude: 113.61332 + 0.0032,
			// iconPath: '/static/carwash.png',  // 洗车图标
			title: "极护汽车美容中心",
			width: 35,
			height: 35,
			callout: {
				content: "加油免费洗车（限会员）\n精洗套餐98元起\n营业时间：8:00-22:00",
				bgColor: '#f0f9ff',
				textAlign: 'left'
			}
		},
		{
			id: 3,
			latitude: 34.74821 + 0.0021, // 大型社区入口
			longitude: 113.61332 + 0.0015,
			// iconPath: '/static/maintenance.png',  // 保养工具图标
			title: "途虎养车(绿城社区店)",
			width: 45,
			height: 45,
			customCallout: {
				type: 2,
				time: '实时状态',
				value: '当前排队：2辆车\n预约保养享8折'
			}
		},
		{
			id: 4,
			latitude: 34.74821 - 0.0012, // 汽配城区域
			longitude: 113.61332 - 0.004,
			//iconPath: '/static/parts.png',  // 零件图标
			title: "德联汽配服务中心",
			width: 40,
			height: 40,
			label: {
				content: "原厂件直营 | 支持到店安装",
				color: '#52c41a',
				fontSize: 14
			}
		},
		{
			id: 5,
			latitude: 34.74821 + 0.003, // 城市主干道入口
			longitude: 113.61332 + 0.002,
			//iconPath: '/static/express.png',  // 快修标识
			title: "车享家极速保养站",
			width: 35,
			height: 35,
			animation: "expand", // 脉冲动画
			customCallout: {
				type: 3,
				trend: "特色服务",
				lastValue: "30分钟小保养\n新能源专修通道"
			}
		}
	])
	//指南针
	const svgZhiNanZhen='<svg t="1741095638279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13125" width="200" height="200"><path d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m128 502.613A128 128 0 0 1 502.613 640l-216.746 98.133L384 521.387A128 128 0 0 1 521.387 384l216.746-98.133z" fill="#1afa29" p-id="13126"></path></svg>'
	const encodedSvgZhiNanZhen=encodeURIComponent(svgZhiNanZhen).replace(/'/g, '%27').replace(/"/g, '%22');
	const ZhiNanZhendataUri = ref(`data:image/svg+xml;charset=utf8,${encodedSvgZhiNanZhen}`);
	const svgCode =
		`<svg t="1740814889904" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6591" width="200" height="200"><path d="M124.695273 583.68H71.68a71.68 71.68 0 0 1 0-143.36h53.038545A393.937455 393.937455 0 0 1 440.482909 124.741818V71.68a71.610182 71.610182 0 1 1 143.220364 0v53.061818a393.914182 393.914182 0 0 1 315.741091 315.578182h53.038545a71.68 71.68 0 0 1 0 143.36h-53.038545a393.914182 393.914182 0 0 1-315.741091 315.578182v53.061818a71.610182 71.610182 0 1 1-143.220364 0v-53.061818A393.937455 393.937455 0 0 1 124.718545 583.68zM512.069818 744.96A232.96 232.96 0 1 0 279.04 512 232.96 232.96 0 0 0 512.069818 744.96z m0-89.832727A143.127273 143.127273 0 1 1 655.290182 512 143.127273 143.127273 0 0 1 512.069818 655.127273z m0 0" fill="#3379E4" p-id="6592"></path></svg>`;
	const encodedSvg = encodeURIComponent(svgCode)
		.replace(/'/g, '%27')
		.replace(/"/g, '%22');
	let dataUri = `data:image/svg+xml;charset=utf8,${encodedSvg}`;
	const handleGetLocation = async () => {
		try {
			// 获取位置信息
			const res = await uni.getLocation({
				type: 'wgs84',
				enableHighAccuracy: true
			})
	
			// 更新经纬度
			coords.value = {
				latitude: res.latitude,
				longitude: res.longitude
			}
			console.log(res);
			await updateMarkerSize(coords.value);
			// 添加标记点（可选）
			markers.value.push({
				id: 0,
				latitude: res.latitude,
				longitude: res.longitude,
				iconPath: dataUri, // 自定义图标路径
				width: 30,
				height: 30
			})
	
			console.log('定位成功:', res)
		} catch (error) {
			console.error('定位失败:', error)
			uni.showToast({
				title: '获取位置失败',
				icon: 'none'
			})
		}
	}
	onMounted(() => {
		handleGetLocation()
		//初始化腾讯地图
		qqmapsdk = new QQMapWX({
			key: 'HCABZ-7K3KM-33W6S-62YLC-T7INS-J5F7U'
		});
	})
	// 计算两点间直线距离（米）
	const calculateDistance = (lat1, lng1, lat2, lng2) => {
		return qqmapsdk.calculateDistance({
			from: {
				latitude: lat1,
				longitude: lng1
			},
			to: {
				latitude: lat2,
				longitude: lng2
			},
			success: res => res.result.elements[0].distance
		});
	};
	//​动态调整图标尺寸逻辑
	const updateMarkerSize = async (currentCoords) => {
		const BASE_SIZE = 35; // 基础尺寸
		const MAX_SIZE = 55; // 最大尺寸
		const RANGE = 3000; // 生效范围（3公里）
	
		const updatedMarkers = await Promise.all(markers.value.map(async marker => {
			if (marker.id === 0) return marker; // 跳过定位点
	
			// 获取距离并动态计算尺寸
			const distance = await calculateDistance(
				currentCoords.latitude, currentCoords.longitude,
				marker.latitude, marker.longitude
			);
			console.log("距离" + distance);
			return {
				...marker,
				width: distance < RANGE ?
					MAX_SIZE - (distance / RANGE) * (MAX_SIZE - BASE_SIZE) : BASE_SIZE,
				height: distance < RANGE ?
					MAX_SIZE - (distance / RANGE) * (MAX_SIZE - BASE_SIZE) : BASE_SIZE
			};
		}));
	
		markers.value = updatedMarkers;
	};
	
	const ComeToDe=()=>{
		uni.navigateTo({
			url:'/pages/gasDetail/gasDetail'
		})
	}
	
</script>
